<template>
	<view class="game-alliance-page bg-white" v-if="loading">
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content">{{title}}</block>
		</bar-title>
		
		
		<view class="shop-alliance">
			<view class="alliance-img">
				<image class="response" 
					:src="allDetail[payType].img" 
					mode="widthFix"></image>
			</view>
			<view class="alliance-title">{{allDetail[payType].title}}</view>
			<view class="alliance-price">¥{{allDetail[payType].price}}</view>
			
			<view class="pay-type"  v-if="payType!=='reserve'">
				<view class="pay-top">付款方式:</view>
				<view class="pay-type-btn flex" >
					<button class="cu-btn block radius"
						:class="payType=='half'? 'bg-cyan':'line-cyan'"
						@click="payType='half'"
					>
						<text>单车位（一个房间)</text>				
					</button>
					
					<button class="cu-btn block radius"
						:class="payType=='year'? 'bg-cyan':'line-cyan'"
						@click="payType='year'"
					>
						<text>双车位（两个房间）</text>				
					</button>
				</view>
			</view>
			
			<view>
				<view class="alliance-intro-box">
					<view class="title">产品详情</view>
					<view class="intro">
						<jyf-parser :html="allDetail[payType].details" ref="article"></jyf-parser>
					</view>
				</view>
				
				
			</view>
			
			
		</view>
		
		<view class="cu-tabbar-height margin-top"></view>
		
		<!-- footer -->
		<view class="footer padding-tb-sm padding-lg">
			<button class="cu-btn block bg-cyan lg round"
				@click="tapAlliancePay"
			>去付款</button>
		</view>
	</view>
</template>

<script>

import jyfParser from "@/components/jyf-parser/jyf-parser";
import { Alliance } from '@/models/alliance.js';
let alliance = new Alliance()
export default {
	components: {
		jyfParser
	},
	data() {
		return {
			payType: 'reserve',
			loading: false,
			title: '',
			allDetail: null
		};
	},
	computed:{
	},
	async onLoad(option) {
		console.log(alliance);
		if(option && option.type) {
			this.payType = option.type
		}
		await alliance.getAllSKU()
		this.allDetail = alliance.allSKU
		this.title = alliance.category
		this.loading = true
	},
	methods: {
		tapAlliancePay() {
			this.$jumpPages('payalliance', {type: this.payType})
		}
	},
	onShareAppMessage (options) {
		console.log(options)
		if (options.from === "menu") {
			return {
				title: this.title,
				path: '/pages/game/alliance?type=' + this.payType,
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.shop-alliance{
	.alliance-title{
		color: #000000;
		padding-top: 30rpx;
		margin: 0 32rpx;
		font-weight: 700;
		font-size: 32rpx;
	}
	.alliance-price{
		padding-top: 25rpx;
		margin: 0 32rpx;
		color: #FA3A70;
		font-size: 32rpx;
	}
	.pay-type{
		margin-top: 40rpx;
		.pay-top{
			margin: 0 32rpx;
			color: #909090;
			font-size: 24rpx;
		}
	}
	.pay-type-btn{
		padding: 15rpx;
		.cu-btn{
			flex: 1;
			margin: 15rpx;
		}
	}
	.alliance-intro-box{
		margin: 50rpx 30rpx;
		background-color: #F8FAFF;
		border-radius: 20rpx;
		padding: 30rpx;
		.title{
			color: #000000;
			font-weight: 700;
			font-size: 28rpx;
			
		}
		.intro{
			margin-top: 20rpx;
			color: #505050;
			font-size: 24rpx;
			line-height: 1.6;
		}
		
	}
}
.footer{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFFFFF;
	align-items: center;
	box-shadow: 1px 0 10px rgba(13, 5, 9, 0.4);;
	.lg{
		height: 72rpx;
	}
}
</style>
